<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<script src="js/jquery2.js"></script> 
		<script src="js/vue.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/md5.js"></script>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="container" id="app">
			<div class="row">
				<div class="col-md-12">
					<div class="page-header">
						<h1>新用户注册</h1>
					</div>
				</div>
				<!-- 基本用户信息 -->
				<div class="col-md-12">
					<h4>
						<span class="label label-info">1</span>
						填写用户基本信息
					</h4>
				</div>
				<!-- 表单区域 -->
				<div class="col-md-9">
					<div class="form-group">
						<label class="control-label">登录名</label>
						<input class="form-control" type="text" v-model="UserName" />
						<span class="help-block"><span class="label label-primary">*必填项</span> 此信息用作登录使用，可使用中文，该项保证唯一性，且不可更改。</span>
					</div>
					<div class="form-group">
						<label class="control-label">网站昵称</label>
						<input class="form-control" type="text" v-model="UserRealName" />
						<span class="help-block"><span class="label label-primary">*必填项</span> 此信息仅作为你在网站中的昵称使用，不保证唯一性。</span>
					</div>
					<div class="form-group" v-bind:class="PasswordClass">
						<label class="control-label">密码</label>
						<input class="form-control" type="password" v-model="PassWord" />
						<label class="control-label">再次输入密码</label>
						<input class="form-control" type="password" v-model="PassWordTest" />
						<span class="help-block"><span class="label label-primary">*必填项</span> 此信息作为登录验证使用，建议密码长度大于8位且包含大写字母、小写字母和符号，密码采用MD5加密存储。</span>
					</div>
				</div>
				
				<!-- 附加用户信息 -->
				<div class="col-md-12">
					<h4>
						<span class="label label-info">2</span>
						填写用户附加信息
					</h4>
				</div>
				<!-- 表单区域 -->
				<div class="col-md-9">
					<div class="form-group">
						<label class="control-label">出生日期</label>
						<input class="form-control" type="date" v-model="BornDate" />
						<span class="help-block">此信息用作展示使用。</span>
					</div>
					<div class="form-group">
						<label class="control-label">性别</label>
						<select class="form-control" v-model="UserSex">
							<option value="">点我选择</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
						<span class="help-block">此信息用作展示使用。</span>
					</div>
					<div class="form-group">
						<label class="control-label">个人介绍</label>
						<input class="form-control" type="text" v-model="UserInfo" />
						<span class="help-block">此信息用作展示使用，仅限单行，最多40字。</span>
					</div>
					<div class="form-group">
						<label class="control-label">验证码</label>
						<div class="form-inline">
							<div class="form-group">
								
								<input class="form-control" type="text" v-model="code" />
								<img src="./code" id="lhl-code"   @click="releaseCode()">
							</div>
						</div>
						
					</div>
					<div class="form-group">
						<button class="btn btn-success" data-toggle="modal" data-target="#regmodal" v-bind:disabled="FormBtn" @click="RegRequest" >
							<span class="glyphicon glyphicon-upload"></span>
							填写完毕，注册
							</button>
						<a href="./reguser" class="btn btn-danger">
							<span class="glyphicon glyphicon-repeat"></span>
							刷新，重新填写
						</a>
					</div>
				</div>
			</div>
			<!-- 注册弹出层 -->
					<div class="modal fade" id="regmodal">
						<div class="modal-dialog">
							<div class="modal-content">
			<!-- 					<div class="modal-header">
									<h3>注册提示</h3>
								</div> -->
								<div class="modal-body">
									<div class="progress">
										<div class="progress-bar progress-bar-striped active" v-bind:class="ModalReg.Class"  style="width: 100%;" ></div>
									</div>
									<h3 style="text-align: center;">{{ModalReg.Text}}</h3>
								</div>
							</div>
						</div>
					</div>
		</div>
		<!-- 注意事项 -->
		<div style="background: #222222; color: #fff;overflow: hidden;">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div style="padding-top: 20px;">
							<dl class="dl-horizontal">
								<dt>网页制作与网站制作信息</dt>
								<dd>网站由以下三位小组成员制作而成，用于 Java Web 结课设计。前端采用 Vue.js、JQuery.js、Bootstrap CSS 等框架制作，后台采用MVC设计，前后端采用 Ajax 进行数据传输，数据库采用 MySQL5.7，运行建议使用 Chrome 版本 73.0.3683.86（正式版本）、Edge 42.17134.1.0 及更新版本进行浏览，不建议采用 Internet Explorer 11.0 版本以下浏览器访问，前端页面均为自适应页面，可使用手机、PC浏览器进行浏览。</dd>
								<dt>小组成员</dt>
								<dd>刘海龙、王泽临、柴广瑞</dd>
								<dt>建议浏览器</dt>
								<dd>Chrome 版本 73.0.3683.86（正式版本）<br>Edge 42.17134.1.0</dd>
								<dt>版权信息</dt>
								<dd>程序源码已在 Gitee 开源，未经开发小组成员授权不得进行商业运作，仅允许学习研究使用。</dd>
								<dt>作者邮箱</dt>
								<dd>liuhailong113@vip.qq.com</dd>
							</dl>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				UserName:'',
				UserRealName:'',
				PassWord:'',
				PassWordTest:'',
				BornDate:'',
				UserSex:'',
				UserInfo:'',
				ModalReg:{
					Text:'注册中...',
					Class:'progress-bar-warning',
				},
				FormBtn:true,
				PasswordClass:'',
				code:'',
			},
			methods:{
				RegRequest:function(){
					var Point=this;
					var login_name=this.UserName;
					var user_name=this.UserRealName;
					var password=hex_md5(this.PassWord);
					var borndate=this.BornDate;
					var sex=this.UserSex;
					var simple=this.UserInfo;
					this.ModalReg.Class="progress-bar-warning";
					if (this.RegDataTest()==false){
						this.ModalReg.Text="注册失败，填写异常";
						this.ModalReg.Class="progress-bar-danger";
						setTimeout(function(){$("#regmodal").modal('hide')},3000);
					}
					$.post('./reguser',{
						login_name:login_name,
						user_name:user_name,
						password:password,
						borndate:borndate,
						sex:sex,
						simple:simple,
						code:this.code
					},function(response){
						if (response=="success"){
							Point.ModalReg.Text="注册成功，3秒后跳转到登录!";
							Point.ModalReg.Class="progress-bar-success";
							setTimeout(function(){$("#regmodal").modal('hide');location.href="./userlogin";},3000);
						}else if (response=="codeerror"){
							Point.ModalReg.Text='登陆失败，验证码错误';
							Point.ModalReg.Class='progress-bar-danger';
							Point.code="";
							setTimeout(function(){$("#loginmodal").modal('hide');},3000);
						}else{
							Point.ModalReg.Text="注册失败，用户已存在";
							Point.ModalReg.Class="progress-bar-danger";
							setTimeout(function(){$("#regmodal").modal('hide')},3000);
						}
					});
				},
				RegDataTest:function(){
					//填写检测
					if (this.UserName.length>0 && this.UserRealName.length>0 && this.PassWord.length>0 ){
						if (this.PassWord==this.PassWordTest){
							this.PasswordClass='has-success';
						}else{
							this.PasswordClass='has-error';
							this.FormBtn=true;
							return false;
						}
						this.FormBtn=false;
						return true;
						
					} 
					this.FormBtn=true;
					return false;
				},
				releaseCode:function(){
					//验证码重置
					var code=document.getElementById("lhl-code");
					var codeurl="./code";
					code.src="";
					code.src=codeurl+"?random="+Math.random();
					
				}
			},
			watch:{
				'UserName':function(value){
					this.RegDataTest();
				},
				'UserRealName':function(value){
					this.RegDataTest();
				},
				'PassWord':function(value){
					this.RegDataTest();
				},
				'PassWordTest':function(value){
					this.RegDataTest();
				},
			}
		});
	</script>
</html>
